<template>
  <div class="containner">
    <div class="top">
      <div class="left">
        <i class="iconfont icon-ego-menu left-menu" @click="isToggle = !isToggle"></i>
        <div>
          <span>首页</span>
          <i class="iconfont icon-xiangyoujiantou" style="font-size: 12px"></i>
          <span>{{ route.meta.title }}</span>
        </div>
      </div>
      <div class="menu" @click="showDrawer = true">
        <i class="iconfont icon-ego-menu"></i>
      </div>
      <div class="right">
        <i class="iconfont icon-fanyi"></i>
        <i class="iconfont icon-quanping" @click="toggleFullScreen"></i>
        <i class="iconfont icon-qingtian rotate" v-show="statuStore.isDark" @click="toggleDark"></i>
        <i class="iconfont icon-yueliang rotate" v-show="!statuStore.isDark" @click="toggleDark"></i>
        <div class="user">
          <img src="https://www.yevpt.com/logo.jpg" />
          <div>
            <span>番茄面警告</span>
            <span>2022-7-3</span>
          </div>
        </div>
        <i class="iconfont icon-shezhi rotate"></i>
      </div>
    </div>
    <div class="middle">
      <Tabs></Tabs>
    </div>
    <div class="bottom">
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Tabs from "../tabs/Tabs.vue";
import { useRoute } from "vue-router";
import { useStatus } from "@/store/status";
import { storeToRefs } from "pinia";
import { useDark, useToggle } from "@vueuse/core";

const route = useRoute();
const statuStore = useStatus();
const { showDrawer, isToggle } = storeToRefs(statuStore);

const isDark = useDark({
  selector: "html",
  valueDark: "dark",
  valueLight: "light",
});

const toggleDark = () => {
  statuStore.isDark = !statuStore.isDark;
  useToggle(isDark)();
};

const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
};
</script>

<style lang="less" scoped>
.containner {
  @media screen and (max-width: 996px) {
    flex: 1;
    border-radius: 8px !important;
  }

  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  font-size: 15px;
  color: var(--color);
  border: none;
  border-radius: 0px 8px 8px 0px;
  overflow: hidden;
  background-color: var(--ElementFill);

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 15px;
    background-color: var(--ElementFill);
    font-size: 13.5px;

    span {
      margin: 0 5px;
    }

    .menu {
      @media screen and (max-width: 996px) {
        display: block;
      }

      display: none;

      i {
        padding: 10px;
        border-radius: 5px;

        &:hover {
          background-color: rgba(180, 180, 180, 0.2);
        }
      }
    }

    .left {
      @media screen and (max-width: 996px) {
        display: none;
      }

      display: flex;
      align-items: center;
      width: 200px;
      height: 100%;

      .left-menu {
        padding: 10px;
        border-radius: 5px;

        &:hover {
          background-color: rgba(180, 180, 180, 0.2);
        }
      }

      span,
      i {
        margin: 0 3px;
      }
    }

    .right {
      display: flex;
      justify-content: end;
      align-items: center;
      width: 320px;
      height: 100%;

      .rotate {
        transition: all 0.5s;
        border-radius: 50%;
      }

      .rotate:hover {
        transform: rotate(100deg);
      }

      i {
        font-size: 20px;
        padding: 8px;
        border-radius: 5px;

        &:hover {
          background-color: rgba(180, 180, 180, 0.2);
        }
      }

      .user {
        display: flex;
        align-items: center;
        margin: 8px;

        img {
          width: 50px;
          height: 50px;
          border-radius: 4px;
        }

        div {
          display: flex;
          flex-direction: column;
          justify-content: center;

          span {
            margin: 1px 5px;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .middle {
    @media screen and (max-width: 750px) {
      display: none;
    }

    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
    background-color: var(--ElementFill);
    border-top: 1px solid rgba(204, 204, 204, 0.5);

    :deep(.el-tabs) {
      height: 40px !important;
      box-sizing: border-box;
      user-select: none;
    }

    :deep(.is-top) {
      border: none;
    }

    :deep(.el-tabs__item) {
      background-color: #afd4fc;
      color: #fff !important;
      border-radius: 5px;
      margin: 0 5px;
    }

    :deep(.el-tabs__header) {
      height: 45px;
    }
  }

  .bottom {
    position: relative;
    width: 100%;
    height: calc(~"(100vh - 105px)");
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--ElementFill);
    border-top: 1px solid #cccccc80;
    overflow: hidden;
  }
}
</style>
